<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  	* {
  		margin: 0;
  		padding: 0;
  	}
  	ul,
  	ol {
  		list-style: none;
  	}
  	#wrap {
  		width: 1200px;
  		margin: 100px auto;
  		/*border: 1px solid red;*/
  	}
  	.slide {
  		position: relative;
  		height: 500px;
  	}
  	li {
  		position: absolute;
      /*left:600px;
      top:250px;
      width: 0;*/
  	}
  	img {
  		width: 100%;
  	}	
		.prev, 
		.next {
			position: absolute;
			top: 50%;
			z-index: 5;
			width: 76px;
			height: 112px;
			transform: translateY(-50%);
		}
		.prev {
			left: 0;
			background-image: url(images/prev.png);
		}
		.next {
			right: 0;
			background-image: url(images/next.png);
		}
  </style>
</head>

<body>
  <div class="wrap" id="wrap">
    <div class="slide" id="slide">
      <ul>
        <li><a href="#"><img src="images/slidepic1.jpg" alt=""/></a></li>
        <li><a href="#"><img src="images/slidepic2.jpg" alt=""/></a></li>
        <li><a href="#"><img src="images/slidepic3.jpg" alt=""/></a></li>
        <li><a href="#"><img src="images/slidepic4.jpg" alt=""/></a></li>
        <li><a href="#"><img src="images/slidepic5.jpg" alt=""/></a></li>
      </ul>
      <div class="arrow" id="arrow">
        <a href="javascript:;" class="prev" id="arrLeft"></a>
        <a href="javascript:;" class="next" id="arrRight"></a>
      </div>
    </div>
  </div>


  <script>
  	// 五张图片的样式
  	var styleInit =  [
      {//0
        top: 100,
        left: 200,
        zIndex: 3,
        width: 800,
        opacity: 1
      },{//1
        top: 60,
        left: 600,
        zIndex: 2,
        width: 600,
        opacity: 0.85
      },{//2
        top: 0,
        left: 750,
        zIndex: 1,
        width: 400,
        opacity: 0.3
      },{//3
        top: 0,
        left: 50,
        zIndex: 1,
        width: 400,
        opacity: 0.3
      },
      {//4
  			top: 60,
  			left: 0,
  			zIndex: 2,
  			width: 600,
  			opacity: 0.85
  		}
  	]

   	// 动画 setInterval()
    function animate(element,object) {
      clearInterval(element.timeId)    
      
      element.timeId = setInterval( function(){
        var flag = true;
        for(var i in object) {          
          if( i == "zIndex" ) {
            element.style[i] = object[i];
          }else if( i == "opacity" ) {
            // 拿到当前的透明度
            var current = element.style[i]*100 || 0;
            // 目标值   object[i]
            var target = object[i]*100;           
            // 步长
            var  step = Math.ceil(Math.abs( current - target )/10);
            // console.log(step)
            current > target? step = -step: step = step;
            current += step;
            element.style[i] = current/100;
          }else {
            var current = parseInt(element.style[i]) || 0;
            var target = object[i];
            var step = Math.ceil(Math.abs(current-target)/10);
            current > target? step = -step: step = step;
            current += step;
            element.style[i] = current + "px";  

          }
          if(target != current) {
            flag = false;
          }         
        }       
        if(flag) {
          clearInterval(element.timeId)
        }
        
      },10)
     
    }


    function showImg() {
      for( var i=0;i<styleInit.length;i++ ) {
        // li[i].style.left = "600px";
        animate(li[i],styleInit[i])
      }
    }

    var nextBtn = document.querySelector(".next");
    var prevBtn = document.querySelector(".prev");
    var li = document.querySelectorAll(".slide li");

    nextBtn.onclick = function() {
      // [].pop()  删除最后一条数据，并将删除的结果返回
      // [].shift()  删除第一条数据，并将删除的结果返回
      styleInit.push( styleInit.shift() );
      showImg();
    }
    prevBtn.onclick = function() {
      styleInit.unshift( styleInit.pop() )
      showImg();
    }
    showImg();


    
  </script>
</body>

</html>